<template>
  <div class="p-rel">
    <el-button type="primary" size="mini" class="edit_btn" @click="handleEdit">{{isEdit?'取消':'管理'}}</el-button>
    <!-- <el-button type="primary" size="mini" class="edit_btn" @click="handleEdit">管理</el-button> -->
    <div class="shortcut flex fw-wrap">
      <div class="shortcut-item flex fd-c ai-center jc-center cursor-pointer p-rel" @click="goPage(shortcut)" v-for="(shortcut,index) in shortcutList">
        <i v-if="isEdit" @click.stop="handleDel(shortcut,index)" class="del_icon el-icon-remove"></i>
        <!-- <img :src="shortcut.img" alt=""> -->
        <!-- <div class="shortcut-name">{{shortcut.name}}</div> -->
        <div class="add_icon">
          <svg-icon :icon-class="shortcut.icon || 'documentation'"/>
        </div>
        <div class="shortcut-name" :title="shortcut.shortcutName">{{shortcut.shortcutName}}</div>
      </div>
      <div v-if="isEdit" @click="handleAdd" class="shortcut-item flex fd-c ai-center jc-center cursor-pointer p-rel">
        <i class="add_icon el-icon-plus"></i>
        <div class="shortcut-name">添加入口</div>
      </div>
    </div>
    <el-dialog
      title="添加快捷入口"
      :visible.sync="dialogVisible"
      @close="dialogClose"
      top="25vh !important"
      width="30%">
      <!-- <shortcutForm v-if="dialogVisible"></shortcutForm> -->
      <el-form :model="form">
        <el-form-item label="菜单">
          <el-select v-model="form.shortcutName" filterable placeholder="请选择菜单" clearable>
            <el-option v-for="item in menuList" :label="item.shortcutName" :value="item.shortcutName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitMenu">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  // import { listShortcut,updateShortcut,addShortcut } from "@/api/jiubu/shortcut";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  // import shortcutForm from "@/views/jiubu/shortcut/index.vue"
  export default{
    components:{shortcutForm},
    data(){
      return {
        isEdit:false , // 是否是编辑状态
        dialogVisible:false,
        shortcutList:[
          // {
          //   img:require('@/assets/images/home/shortcut1.png'),
          //   name:'项目创建',
          //   url:'/ProjectAdd'
          // },{
          //   img:require('@/assets/images/home/shortcut2.png'),
          //   name:'公司管理',
          //   url:'/system/companies',
          // },{
          //   img:require('@/assets/images/home/shortcut3.png'),
          //   name:'组织管理',
          //   url:'/system/enterprise'
          // },{
          //   img:require('@/assets/images/home/shortcut4.png'),
          //   name:'用户管理',
          //   url:'/system/user'
          // },{
          //   img:require('@/assets/images/home/shortcut5.png'),
          //   name:'角色管理',
          //   url:'/system/role'
          // },{
          //   img:require('@/assets/images/home/shortcut6.png'),
          //   name:'专家管理',
          //   url:'/system/expert'
          // },{
          //   img:require('@/assets/images/home/shortcut7.png'),
          //   name:'台账管理',
          //   url:'/ledger'
          // },
        ],
        menuList:[
          {shortcutName:'菜单管理',url:'/system/menu',icon:'',status:'0',},
          {shortcutName:'角色管理',url:'/system/role',icon:'',status:'0',},
          {shortcutName:'用户管理',url:'/system/user',icon:'',status:'0',},
          {shortcutName:'公告管理',url:'/system/notice',icon:'',status:'0',},
        ],
        form:{
          shortcutName:''
        }
      }
    },
   /* created() {
      this.getShortcut()
    },*/
    methods:{
      getShortcut(){
        listShortcut({ pageNum: 1,pageSize: 999, }).then(response => {
          this.shortcutList = response.rows.filter(item=>{ return item.status == '0' });
        });
      },
      goPage(shortcut){
        this.$router.push(shortcut.url)
      },
      handleDel(shortcut,index){
        let form = { ...this.shortcutList[index],status:'1' } // status == 1 禁用 (删除)
        updateShortcut(form).then(res=>{
          this.$message.success('删除成功')
          this.getShortcut()
        })
        // this.shortcutList.splice(index,1)
      },
      // 添加快捷入口
      handleAdd(){
        this.dialogVisible = true
      },
      handleEdit(){
        // this.dialogVisible = true
        this.isEdit = !this.isEdit
      },
      // 弹窗关闭时
      dialogClose(){
        this.getShortcut()
         this.form.shortcutName = ''
      },
      // 提交菜单
      commitMenu(){
        if(!this.form.shortcutName){
          this.$message.error('请选择菜单')
          return
        }
        let form = this.menuList.filter(item=>{ return item.shortcutName == this.form.shortcutName })[0]
        addShortcut(form).then(res=>{
          this.$message.success('添加成功')
          this.getShortcut()
          this.dialogVisible = false
        })
      },
    }
  }
</script>

<style scoped>
  .add_icon{
    width: 44px;
    height: 44px;
    font-weight: bold;
    text-align: center;
    line-height: 44px;
    border-radius: 10px;
    background-color: #f5f6fa;
  }
  .del_icon{
    position: absolute;
    right: 0;
    top: 0;
  }
  .edit_btn{
    position: absolute;
    right: 0;
    top: -40px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .shortcut{
    max-height: 312px;
    overflow-y: auto;
    margin-top:12px;
  }
  .shortcut-item{
    margin-top: 16px;
    margin-right: 29px;
    width: 58px;
  }
  .shortcut-name{
    font-size: 14px;
    height: 36px;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
